<template>
  <!--  clearable添加清空按钮-->
  <div>
    <h3>自定义模板</h3>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>

    <el-collapse style="margin-top: 5px;">
      <el-collapse-item title="查看代码">
<pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-select</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请选择"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">el-option</span>
      <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in cities"</span>
      <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.value"</span>
      <span class="hljs-attr">:label</span>=<span class="hljs-string">"item.label"</span>
      <span class="hljs-attr">:value</span>=<span class="hljs-string">"item.value"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"float: left"</span>&gt;</span><span>{{</span>item.value<span>}}</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"float: right; color: #8492a6; font-size: 13px"</span>&gt;</span><span>{{</span>item.value<span>}}</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">el-option</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">el-select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">cities</span>: [{
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Beijing'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'北京'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Shanghai'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'上海'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Nanjing'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'南京'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Chengdu'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'成都'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Shenzhen'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'深圳'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'Guangzhou'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'广州'</span>
        }],
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                cities: [{
                    value: 'Beijing',
                    label: '北京'
                }, {
                    value: 'Shanghai',
                    label: '上海'
                }, {
                    value: 'Nanjing',
                    label: '南京'
                }, {
                    value: 'Chengdu',
                    label: '成都'
                }, {
                    value: 'Shenzhen',
                    label: '深圳'
                }, {
                    value: 'Guangzhou',
                    label: '广州'
                }],
                value: ''
            }
        }
    }
</script>
